<template>
	<view class="content">
		<view class="header">
			<view class="title" src="">
				<image style="width: 750rpx;height: 368rpx;" class="title_img"
					src="https://goods.ruanmengkeji.cn/api/fileUp/4ce88c2c-7ec7-4c9f-aae5-cd2f97056bde.png" mode="">
				</image>

			</view>
		</view>
		<view class="content_box">
			<view class="store_img">
				<image style="width: 108rpx;height: 108rpx;margin-right: 40rpx;"
					src="../../static/img/storetitleimg.png" mode=""></image>
			</view>
			<view class="store_val">
				<view class="tit">
					<text class="name">成飞餐厅</text>
					<text class="phone">联系电话：15485760364</text>
				</view>
				<view class="yue_shou">
					<text class="yue1" style="color: #333333;">月售 2000+</text>
					<text class="yue2" style="color: #333333;">起送<text style="color: #FF2020;">￥25</text>
					</text>
				</view>
				<view class="time">
					<image style="width: 20rpx;height: 20rpx;margin-right: 20rpx;" src="../../static/img/clock.png"
						mode=""></image>
					<text>营业时间：8:00-12:00 14:00-18:00</text>
				</view>
				<view class="miaoshu">
					<image style="width: 20rpx;height: 20rpx;margin-right: 20rpx;" src="../../static/img/lingdang.png"
						mode=""></image>
					<text>欢迎光临，很高兴为您服务~</text>
				</view>
			</view>
		</view>
		<view class="food_box">
			<view class="food_classify">
				<scroll-view scroll-y scroll-with-animation class="" :scroll-top="scrollTop"
					:scroll-into-view="itemId">
					<view class="classify_box" v-for="(item, index) in menuList " :key="index">
						<!-- <view class="leftborder"></view> -->
						<view class="classify_list">
							<view class="foodimg">
								<image style="width: 48rpx;height: 48rpx;" :src="item.picUrl" mode="">
								</image>
							</view>
							<text>{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="food_list">
				<view class="food">
					<scroll-view :scroll-top="scrollTop" :scroll-y="true" style="height: 655rpx;white-space: nowrap;"
						class="scroll-Y">
						<view class="content__box" v-for="(item, index) in menuList " :key="index">
							<view class="title_small">
								<text>{{item.name}}</text>
							</view>
							<view class="contents" v-for="item in item.goodsList" :key="item.id"
								@click="handelmodelShow(2,item)">
								<view class="order1">
									<image style="width: 172rpx;height: 146rpx;display: block;" :src="item.image"
										mode="">
									</image>
								</view>
								<view class="food_val">
									<text class="qiguoji">{{item.storeName}}</text>
									<view
										style="display: flex;justify-content: space-between;margin-top: 66rpx;align-items: center;">
										<text class="price">{{'￥'+item.price}}</text>
										<view class="number_box" style="width: 126rpx;display: flex;">
											<view @click.stop="handelNumberBox('del',item.id)">
												<image style="width: 36rpx;height: 36rpx;"
													src="../../static/img/jianshao.png" mode="">
												</image>
											</view>
											<text style="width: 50px;text-align: center;"
												class="input">{{item.postage}}</text>
											<view @click.stop="handelNumberBox('add',item.id)">
												<image style="width: 38rpx;height: 38rpx;"
													src="../../static/img/tianjia.png" mode="">
												</image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="card_box">
			<view class="card" @click="handelmodelShow(1)">
				<image style="width: 750rpx;height: 108rpx;" src="../../static/img/goodscard.png" mode=""></image>
				<view class="card_val">
					<image style="width: 64rpx;height: 64rpx;margin-right:78rpx;" src="../../static/img/card.png"
						mode=""></image>
					<p>合计：
					<p>￥115.00</p>
					</p>
					<p style="position: absolute; right: -255rpx;">去下单</p>
				</view>
			</view>
		</view>
		<view class="model_box">
			<u-popup :show="modelShow" mode="bottom" :round="20" @close="close" @open="open">
				<view class="" v-show="popupShow1">
					<view>
						<view class="model_head">
							<view class="model_empty">
								<image src="../../static/img/del.png" mode=""></image>
								<p>清空</p>
							</view>
							<view class="model_text">
								<text>购物车</text>
								<text>(4)</text>
							</view>
							<view class="model_close">
								<image src="../../static/img/colse.png" mode=""></image>
							</view>
						</view>
						<view class="">
							<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
								@scrolltolower="lower" @scroll="scroll">
								<view class="content__box">
									<view class="contents" v-for="item in listVal" :key="item.id">
										<view class="order1">
											<image style="width: 172rpx;height: 146rpx;display: block;"
												:src="item.imgurl" mode="">
											</image>
										</view>
										<view class="food_val">
											<text class="qiguoji">{{item.name}}</text>
											<view
												style="display: flex;justify-content: space-between; width: 450rpx;margin-top: 66rpx;align-items: center;">
												<text class="price">{{'￥'+item.priceval}}</text><text
													class="yuding">预定三天</text>
												<view class="number_box" style="width: 126rpx;display: flex;">
													<view @click.stop="handelNumberBox('del',item.id)">
														<image style="width: 36rpx;height: 36rpx;"
															src="../../static/img/jianshao.png" mode="">
														</image>
													</view>
													<text style="width: 50px;text-align: center;"
														class="input">{{item.numberval}}</text>
													<view @click.stop="handelNumberBox('add',item.id)">
														<image style="width: 38rpx;height: 38rpx;"
															src="../../static/img/tianjia.png" mode="">
														</image>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="goods_card">
						<view class="card">
							<view class="card_vals">
								<view
									style="width: 108rpx;height: 108rpx;margin-right:78rpx;border-radius: 74rpx;background-color: #5CAF5D;margin-right:78rpx;">
									<image style="width: 64rpx;height: 64rpx;padding:22rpx"
										src="../../static/img/card.png" mode="">
									</image>
								</view>
								<view>
									<text>合计：<text>￥ 115.00</text></text>
									<text class="dabao">另需打包费：￥3</text>
								</view>
								<text @click="gotoXiadan"
									style="margin-left: 58rpx;width: 208rpx;height: 64rpx;background-color: #5CAF5D;border-radius: 44rpx;color: #fff;text-align: center;line-height: 64rpx;">去下单</text>
							</view>
						</view>
					</view>
				</view>
				<view class="yingyang_box" v-show="popupShow2">
					<view class="title_img">
						<image style="width: 750rpx;height: 410rpx;" src="../../static/img/food1.png" mode=""></image>
					</view>
					<view class="" style="width: 710rpx;margin-top: 20rpx;margin: auto;">
						<view style="display: flex;justify-content: space-between;">
							<text class="title1">{{yingyangtaocan.name}}</text>
							<text class="price">{{'￥'+yingyangtaocan.priceval}}</text>
						</view>
						<view class="month">
							月售2000+
						</view>
						<view class="food_val">
							<view class="more-text">
								<text :class="{ expanded: isExpanded }"
									@click="isExpanded = !isExpanded">{{ textContent}}</text>
								<text v-if="!isExpanded" class="more-link" @click="isExpanded = true"></text>
							</view>
						</view>
						<view class="food__classify">
							<text class="title">预定时间</text>
							<view class="week_time">
								<u-grid :border="false" col="4">
									<u-grid-item v-for="(listItem,listIndex) in timeVal" :key="listIndex">
										<view :class="{active:listItem.classChange}" class="time"
											@click="handelTimevalShow(listItem.id,listItem.classChange)">
											<view class="week">{{listItem.weeks}}</view>
											<view class="months">{{listItem.month}}</view>
										</view>
									</u-grid-item>
								</u-grid>
							</view>
							<text class="title">规格</text>
							<view class="classify_val">
								<u-grid :border="false" col="3">
									<u-grid-item v-for="(listItem,listIndex) in guige" :key="listIndex">
										<view class="time" :class="{active:guigeListIndex==listIndex}"
											@click="handelGuigevalShow(listIndex)">
											<view class="months">{{listItem}}</view>
										</view>
									</u-grid-item>
								</u-grid>
							</view>
							<text class="title">口味</text>
							<view class="eat_box">
								<u-grid :border="false" col="3">
									<u-grid-item v-for="(listItem,listIndex) in kouwei" :key="listIndex">
										<view class="time" :class="{active:kouweiListIndex==listIndex}"
											@click="handelKouweivalShow(listIndex)">
											<view class="months">{{listItem}}</view>
										</view>
									</u-grid-item>
								</u-grid>
							</view>
							<view class="allval">
								<text class="price">￥112</text>
								<text
									style="display: block;width: 166rpx; font-size: 28rpx; color: #999999;">预定2天</text>
								<view class="number_box" style="width: 126rpx;display: flex;">
									<view @click.stop="handelNumberBox('del',yingyangtaocan.id)">
										<image style="width: 36rpx;height: 36rpx;" src="../../static/img/jianshao.png"
											mode="">
										</image>
									</view>
									<text style="width: 50px;text-align: center;"
										class="input">{{yingyangtaocan.numberval}}</text>
									<view @click.stop="handelNumberBox('add',yingyangtaocan.id)">
										<image style="width: 38rpx;height: 38rpx;" src="../../static/img/tianjia.png"
											mode="">
										</image>
									</view>
								</view>
							</view>
							<view class="goback">
								<view style="width: 66rpx;text-align: center;" @click="close">
									<image style="width: 26rpx;height: 26rpx;" src="../../static/img/goback.png"
										mode=""></image>
									<text style="font-size: 24rpx;display: block;">返回</text>
								</view>
								<u-button shape='circle' size='small' type='success' @click="gotoXiadan">去下单</u-button>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import menu from "@/api/menu.js"
	export default {
		data() {
			return {
				menuList: [], //菜单列表
				modelShow: false,
				popupShow1: false,
				popupShow2: false,
				yingyangtaocan: {},
				textContent: '佛手凡鲜甜清爽，加到燕制3个多小时的鸡汤里，漫得透透的，鲜味沁入瓜肉纤维里，出落得透亮、细媺、多汁，搭配上柔软弹佛手凡鲜甜清爽，加到燕制3个多小时的鸡汤里，漫得透透的，鲜味沁入瓜肉纤维里，出落得透亮、细媺、多汁，搭配上柔软弹',
				isExpanded: false,
				timeVal: [],
				timeArr: [],
				kouweiListIndex: "",
				guigeListIndex: "",
				guige: ['小份', '中份', '大份'],
				kouwei: ['麻辣', '五香', '红烧'],
				timevalShow: 0,
				listVal: [{
					type: "warning",
					value: 100,
					name: "椒盐汽锅鸡",
					priceval: "122",
					imgurl: "../../static/img/food1.png",
					id: "1",
					numberval: 0
				}, {
					name: "麻辣汽锅鸡",
					priceval: "122",
					imgurl: "../../static/img/food1.png",
					id: "2",
					numberval: 0
				}, {
					name: "红烧汽锅鸡",
					priceval: "122",
					imgurl: "../../static/img/food1.png",
					id: "3",
					numberval: 0
				}, {
					name: "红烧汽锅鸡",
					priceval: "122",
					imgurl: "../../static/img/food1.png",
					id: "3",
					numberval: 0
				}, {
					name: "红烧汽锅鸡",
					priceval: "122",
					imgurl: "../../static/img/food1.png",
					id: "3",
					numberval: 0
				}, {
					name: "红烧汽锅鸡",
					priceval: "122",
					imgurl: "../../static/img/food1.png",
					id: "3",
					numberval: 0
				}]
			}
		},
		onLoad(id) {
			this.getLastWeekDates()
			menu.findMenuId(id.id).then(res => {
				console.log(res);
				if (res.code == 0) {
					this.menuList = res.data
				}
			})
		},
		methods: {
			click(name) {
				console.log('sssss', name);
			},
			displayText() {
				return this.isExpanded ? this.text : this.text.slice(0, 100);
			},
			open() {
				// console.log('open');
			},
			close() {
				this.modelShow = false
				// console.log('close');
			},
			gotoXiadan() {
				uni.navigateTo({
					url: '/homepage/subOrder/subOrder'
				})
			},
			handelTimevalShow(id, check) {
				this.timeVal.forEach((item) => {
					if (item.id == id) {
						if (check) {
							item.classChange = !check
						} else {
							item.classChange = !check
						}
					}
				})
			},
			handelGuigevalShow(index) {
				this.guigeListIndex = this.guigeListIndex === index ? null : index;
			},
			handelKouweivalShow(index) {
				this.kouweiListIndex = this.kouweiListIndex === index ? null : index;
			},
			// 获取时间
			formatDate(date) {
				let dateValue = date.map(item => {
					return `${(item.getMonth() + 1).toString().padStart(2, '0')}.${item.getDate().toString().padStart(2, '0')}`;
				})
				const daysOfWeek = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				let weeksValue = date.map(item => {
					return daysOfWeek[item.getDay()]
				})
				this.timeVal = dateValue.map((item, index) => {
					return {
						weeks: weeksValue[index],
						month: item,
						id: index,
						classChange: false
					}
				})
				console.log('时间aaaaa', this.timeVal);
			},
			getLastWeekDates() {
				let dates = [];
				for (let i = 0; i < 7; i++) {
					let date = new Date();
					date.setDate(date.getDate() + i); // 设置为过去i天的日期
					dates.push(date);
				}
				this.formatDate(dates)
			},
			handelmodelShow(val, item) {
				this.modelShow = true
				console.log('adadadad', val);
				if (val == 1) {
					this.popupShow1 = true
					this.popupShow2 = false
				} else if (val == 2) {
					this.yingyangtaocan = item
					console.log('yingyangtaocan', this.yingyangtaocan);
					this.popupShow1 = false
					this.popupShow2 = true
				}

			},
			valChange(e) {
				console.log('当前值eeeeee ', this.$refs.numberbox)
			},
			handelNumberBox(val, num) {
				this.listVal.forEach((item) => {
					if (item.id == num) {
						if (val == 'add') {
							item.numberval++
						} else if (val == 'del') {
							if (item.numberval == 0) {
								item.numberval = 0
							} else {
								item.numberval--
							}
						}
					} else {
						return
					}
				})
				console.log('this.listVal', this.listVal);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.food__classify {
		width: 710rpx;
		height: 764rpx;
		background-color: #fdfdfd !important;

		// border: 2rpx solid #FF0000;
		.goback {
			display: flex;
			align-items: center;

		}

		.title {
			width: 112rpx;
			height: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			margin-top: 20rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.week_time {
			height: 240rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-items: center;
			font-size: 24rpx;

			.time {
				text-align: center;
				padding: 6rpx;
				width: 136rpx;
				height: 78rpx;
				margin: 16rpx 16rpx 16rpx 16rpx;
				background: #f6f6f6;
				color: #333333;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				&.active {
					text-align: center;
					padding: 6rpx;
					width: 136rpx;
					height: 78rpx;
					margin: 16rpx 16rpx 16rpx 16rpx;

					color: #5CAF5D;
					background: #F1F8F2;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}
		}

		.classify_val {
			height: 90rpx;
			margin-top: 10rpx;
			font-size: 24rpx;

			.time {
				text-align: center;
				width: 136rpx;
				height: 58rpx;
				line-height: 58rpx;
				margin: 16rpx 16rpx 16rpx 16rpx;
				background: #f6f6f6;
				color: #333333;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				&.active {
					text-align: center;
					padding: 6rpx;
					width: 136rpx;
					height: 58rpx;
					line-height: 58rpx;
					margin: 16rpx 16rpx 16rpx 16rpx;
					color: #5CAF5D;
					background: #F1F8F2;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}
		}

		.eat_box {
			height: 90rpx;
			font-size: 24rpx;

			.time {
				text-align: center;
				width: 136rpx;
				height: 58rpx;
				line-height: 58rpx;
				margin: 16rpx 16rpx 16rpx 16rpx;
				background: #f6f6f6;
				color: #333333;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				&.active {
					text-align: center;
					padding: 6rpx;
					width: 136rpx;
					height: 58rpx;
					line-height: 58rpx;
					margin: 16rpx 16rpx 16rpx 16rpx;
					color: #5CAF5D;
					background: #F1F8F2;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}
		}

		.allval {
			display: flex;
			align-items: center;
			height: 78rpx;

			.price {
				width: 448rpx;
				height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FF1C1C;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.yingyang_box {
		font-family: PingFang SC, PingFang SC;
		margin: auto;

		.title1 {
			width: 224rpx;
			height: 44rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.title {
			width: 224rpx;
			height: 44rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.price {
			width: 120rpx;
			height: 40rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FF1000;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.month {
			margin: 10rpx 0 10rpx 0;
			height: 34rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.more-text {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.expanded {
			display: block;
			white-space: normal;
			overflow: visible;
		}

		.more-link {
			color: blue;
			cursor: pointer;
		}

		.food_val {
			// width: 710rpx;
			// height: 88rpx;
			margin-bottom: 12rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			text-align: left;
			font-style: normal;
			text-transform: none;
			overflow: hidden;
			/* 确保超出的内容会被隐藏 */
			text-overflow: ellipsis;
			/* 使用省略号显示超出的文本 */
			display: -webkit-box;
			/* 使用弹性盒子布局模型 */
			-webkit-line-clamp: 2;
			/* 限制在3行 */
			-webkit-box-orient: vertical;
			/* 垂直排列盒子 */
			white-space: normal;
			/* 允许文本换行 */
			word-break: break-all;
			/* 允许在单词内换行 */
		}
	}

	.model_box {

		.model_head {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 20rpx;

			.model_empty {
				display: flex;

				p {
					margin-left: 8rpx;
					font-size: 24rpx;
					color: #9A9A9A;
				}

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

			.model_text {
				text:nth-child(1) {
					font-size: 32rpx;
					font-weight: bold;
				}

				text:nth-child(2) {
					color: #ff9200;
					margin-left: 8rpx;
				}
			}


			.model_close {
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.card_vals {
			width: 710rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;

			text {
				font-family: PingFang SC, PingFang SC;
				color: #FF1C1C;
			}

			.dabao {
				display: block;
				width: 182rpx;
				height: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.goods_card {
			height: 66rpx;
		}
	}

	.card_val {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		position: absolute;
		bottom: 35rpx;
		left: 59rpx;

		text {
			font-family: PingFang SC, PingFang SC;
		}
	}

	.card_box {
		.card {
			margin: auto;
			position: sticky;
			bottom: -91rpx;
		}
	}

	.header {

		/* 确保头部在其他元素之上 */
	}

	.content_box {
		display: flex;
		padding: 30rpx;
		background-color: #fff;

		.tit {
			.name {
				width: 128rpx;
				height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.phone {
				margin-left: 35rpx;
				width: 260rpx;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7F7F7F;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.yue_shou {
			margin: 15rpx 0;
			font-size: 24rpx;

			.yue1 {
				margin-right: 33rpx;
			}
		}

		.time,
		.miaoshu {
			margin: 15rpx 0 15rpx 0;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7F7F7F;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.u-number-box {
		width: 124rpx;
	}

	.content__box {
		padding: 25rpx;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.contents {
		display: flex;
		justify-content: space-between;
		width: 526rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.yuding {
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-right: 110rpx;
		}

		.qiguoji {
			width: 224rpx;
			height: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			overflow: hidden;
			/* 隐藏超出的部分 */
			white-space: nowrap;
			/* 不换行 */
			text-overflow: ellipsis;
			/* 显示省略号 */
		}

		.price {
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FF1000;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.food_val {
			padding-left: 30rpx;
			width: 362rpx;
		}
	}

	.title_small {
		width: 112rpx;
		height: 40rpx;
		display: block;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-bottom: 20rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.food_box {
		display: flex;
		justify-content: space-between;

		.food_classify {

			height: 685rpx;
			overflow: auto;
			overflow-y: scroll;

			.classify_box {
				width: 188rpx;
				height: 120rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
			}

			.leftborder {
				width: 8rpx;
				height: 88rpx;
				background: linear-gradient(#3C9138 0%, #B9D3B8 100%);
				box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				&.active {
					width: 8rpx;
					height: 88rpx;
					background: linear-gradient(#3C9138 0%, #B9D3B8 100%);
					box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}

			.classify_list {
				width: 170rpx;
				text-align: center;
			}
			
			.isColor{
				color: #3C9138;
			}
		}

		.food {
			margin-top: 30rpx;
			height: 100%;
			background-color: #fff;
		}
	}
</style>